<template>
    <div class="crud-container">
        <el-card shadow="never">
            <el-input placeholder="请输入关键字" style="max-width: 280px" />
            <el-button type="primary" class="ml10" @click="onSearch">
                <el-icon>
                    <ele-Search />
                </el-icon>
                查询
            </el-button>
            <el-button type="default" class="ml10" @click="onOpenAdd">
                <el-icon>
                    <ele-Refresh />
                </el-icon>
                重置
            </el-button>
        </el-card>
        <el-card id="contentBox" shadow="never" class="content-box">
            <div class="toolbar">
                <el-button type="primary" @click="onOpenAdd">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>
                    新增
                </el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" border row-key="id" :max-height="tableMaxHeight">
                <el-table-column label="菜单名称" show-overflow-tooltip>
                    <template #default="scope">
                        <SvgIcon :name="scope.row?.icon" />
                        <span class="ml10">{{ scope.row?.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" width="80">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
                        <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="primary">菜单</el-tag>
                        <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
                        <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="path" label="路由路径" show-overflow-tooltip />
                <el-table-column label="组件路径" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row.component }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限标识" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ scope.row?.perm }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序" show-overflow-tooltip width="80">
                    <template #default="scope">
                        {{ scope.row.sort }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" show-overflow-tooltip width="200">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenAdd()">
                            <el-icon>
                                <ele-Plus />
                            </el-icon>
                            新增
                        </el-button>
                        <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                            <el-icon>
                                <ele-Edit />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">
                            <el-icon>
                                <ele-Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <MenuForm ref="menuFormRef" @refresh="getTableData" />
        </el-card>
    </div>
</template>
<script setup lang="ts" name="system-menu">
import { ref, reactive, onMounted, defineAsyncComponent, nextTick } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { getMenuList, deleteMenu, getMenuDetail } from '@/api/system/menu/index.ts'
import { MenuTypeEnum } from '@/enums/MenuTypeEnum'
import { Menu } from '@/api/system/menu/types.ts'
const MenuForm = defineAsyncComponent(() => import('./components/MenuForm.vue'))

//表单数据
const tableData = ref<Array<Menu.Row>>([])
//搜索条件
const searchState = reactive<Menu.Query>({
    keywords: '',
})
/**
 * 获取菜单信息
 */
const getTableData = () => {
    getMenuList(searchState).then((resp: Array<Menu.Row>) => {
        tableData.value = resp
    })
}
//搜索
const onSearch = () => {
    getTableData()
}

const menuFormRef = ref()
/** 打开新增弹窗 */
const onOpenAdd = () => {
    menuFormRef.value.openDialog()
}
/**
 * 打开修改弹窗
 * @param row
 */
const onOpenEdit = async (row: Menu.Row) => {
    const item = await getMenuDetail(row.id)
    menuFormRef.value.openDialog(item)
}

/**
 *  删除菜单
 * @param row
 */
const onTabelRowDel = (row: Menu.Row) => {
    ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deleteMenu(row.id)
                .then(() => {
                    ElMessage.success('删除成功')
                    getTableData()
                    //TODO 刷新菜单
                })
                .catch(() => {
                    ElMessage.error('删除失败')
                })
        })
        .catch(() => {})
}

const tableMaxHeight = ref(0)
const updateMaxHeight = () => {
    const element = document.getElementById('contentBox')
    const clientHeight = element?.clientHeight || 0
    tableMaxHeight.value = clientHeight - 80 || 0
}
onMounted(() => {
    nextTick(() => {
        updateMaxHeight()
        getTableData()
    })
})
</script>
